<template>
    <div style="display:flex;margin-top:8px">
       
<div data-v-93d9bbac="" class="el-col el-col-24 el-col-sm-12 el-col-lg-6 is-guttered" style="padding-right: 10px; padding-left: 10px;"><div data-v-93d9bbac="" class="small-panel user-reg suspension"><div data-v-93d9bbac="" class="small-panel-title">会员注册量</div><div data-v-93d9bbac="" class="small-panel-content"><div data-v-93d9bbac="" class="content-left"><i data-v-93d9bbac="" class="fa fa-line-chart icon" style="font-size: 20px; color: rgb(133, 149, 244);"></i><div data-v-93d9bbac="" class="el-statistic"><!--v-if--><div class="el-statistic__content"><!--v-if--><span class="el-statistic__number" style="font-size: 28px;">5,456</span><!--v-if--></div></div></div><div data-v-93d9bbac="" class="content-right">+14%</div></div></div></div>
<div data-v-93d9bbac="" class="el-col el-col-24 el-col-sm-12 el-col-lg-6 is-guttered" style="padding-right: 10px; padding-left: 10px;"><div data-v-93d9bbac="" class="small-panel file suspension"><div data-v-93d9bbac="" class="small-panel-title">附件上传量</div><div data-v-93d9bbac="" class="small-panel-content"><div data-v-93d9bbac="" class="content-left"><i data-v-93d9bbac="" class="fa fa-file-text icon" style="font-size: 20px; color: rgb(173, 133, 244);"></i><div data-v-93d9bbac="" class="el-statistic"><!--v-if--><div class="el-statistic__content"><!--v-if--><span class="el-statistic__number" style="font-size: 28px;">1,234</span><!--v-if--></div></div></div><div data-v-93d9bbac="" class="content-right">+50%</div></div></div></div>
<div data-v-93d9bbac="" class="el-col el-col-24 el-col-sm-12 el-col-lg-6 is-guttered" style="padding-right: 10px; padding-left: 10px;"><div data-v-93d9bbac="" class="small-panel users suspension"><div data-v-93d9bbac="" class="small-panel-title">会员总数</div><div data-v-93d9bbac="" class="small-panel-content"><div data-v-93d9bbac="" class="content-left"><i data-v-93d9bbac="" class="fa fa-users icon" style="font-size: 20px; color: rgb(116, 168, 181);"></i><div data-v-93d9bbac="" class="el-statistic"><!--v-if--><div class="el-statistic__content"><!--v-if--><span class="el-statistic__number" style="font-size: 28px;">9,486</span><!--v-if--></div></div></div><div data-v-93d9bbac="" class="content-right">+28%</div></div></div></div>
<div data-v-93d9bbac="" class="el-col el-col-24 el-col-sm-12 el-col-lg-6 is-guttered" style="padding-right: 10px; padding-left: 10px;"><div data-v-93d9bbac="" class="small-panel addons suspension"><div data-v-93d9bbac="" class="small-panel-title">已装插件数</div><div data-v-93d9bbac="" class="small-panel-content"><div data-v-93d9bbac="" class="content-left"><i data-v-93d9bbac="" class="fa fa-object-group icon" style="font-size: 20px; color: rgb(244, 133, 149);"></i><div data-v-93d9bbac="" class="el-statistic"><!--v-if--><div class="el-statistic__content"><!--v-if--><span class="el-statistic__number" style="font-size: 28px;">875</span><!--v-if--></div></div></div><div data-v-93d9bbac="" class="content-right">+88%</div></div></div></div>

</div>
</template>

<script setup lang="ts">

</script>

<style scoped>

.small-panel {
    background-color: #e9edf2;
    border-radius: var(--el-border-radius-base);
    padding: 25px;
    margin-bottom: 20px;
}
.small-panel .small-panel-title {
    color: #92969a;
    font-size: 15px;
}

.small-panel .small-panel-content {
    display: flex;
    align-items: flex-end;
    margin-top: 20px;
    color: #2c3f5d;
}


.small-panel .small-panel-content .content-left {
    display: flex;
    align-items: center;
    font-size: 24px;
}
.small-panel .small-panel-content .content-right {
    font-size: 18px;
    margin-left: auto;
}
.fa {
    display: inline-block;
    font: 14px / 1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.small-panel .small-panel-content .content-left .icon {
    margin-right: 10px;
}
.small-panel {
    background-color: var(--ba-bg-color-overlay);
}
.small-panel {
    background-color: #e9edf2;
    border-radius: var(--el-border-radius-base);
    padding: 25px;
    margin-bottom: 20px;
}
.suspension {
    transition: all .3s ease;
}
.small-panel .small-panel-title {
    color: #92969a;
    font-size: 15px;
}
div {
    display: block;
    unicode-bidi: isolate;
}
</style>